
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="/ref/bootstrap.min.css" rel="stylesheet">
<link href="/ref/bootstrap-icons.min.css" rel="stylesheet">

<body class="container" ng-app="app" ng-controller="ctrl">
<nav class="navbar bg-light">
<a class="navbar-brand" href="#">{{title}}</a>

<form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="输入姓名或职务" ng-click="inputBox.showHelp()" ng-model="inputBox.value">
      <button class="input-group-text" ng-click="inputBox.search()"><text class="bi-search"></text></button>
    </div>
</form>

</nav>
<br/>

<div>
    <div class="card" ng-show="inputBox.show">
        <div class="card-body">
            <p>历史搜索&nbsp;&nbsp;<span ng-repeat="h in historyList" ng-click="h.search()"><span class="badge bg-primary">{{h.value}}</span>&nbsp;<span></p>
            <p>分类搜索&nbsp;&nbsp;<span ng-repeat="h in areaList" ng-click="h.search()"><span class="badge bg-primary">{{h.value}}</span>&nbsp;<span></span></p>
            <p>
                <a href="#" class="card-link" ng-click="inputBox.clear()">清空搜索框</a>
                <a href="#" class="card-link" ng-click="inputBox.closeHelp()">关闭搜索提示</a>
            </p>
        </div>
    </div>
    <br/>
</div>

<div class="row">

    <div class="col-6 col-md-3" ng-repeat="user in userList">
        <div>
            <div class="card"  data-bs-toggle="modal" data-bs-target="#myModal" ng-click="user.click()">
                <img class="card-img-top" ng-src="{{user.pic}}" alt="图片">
                <div class="card-body">
                    <h6>{{user.name}}</h6>
                    <h7 class="text-secondary">{{user.office}}</h7>
                </div>
            </div>
        </div>
        <br/>
    </div>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">详细信息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <nav class="nav nav-pills">
                <a href="#" ng-class="currentUser.page==0 ? 'nav-item nav-link active':'nav-item nav-link'" ng-click="currentUser.page=0">基本信息</a>
                <a href="#" ng-class="currentUser.page==1 ? 'nav-item nav-link active':'nav-item nav-link'" ng-click="currentUser.page=1">财务状况</a>
                <a href="#" ng-class="currentUser.page==2 ? 'nav-item nav-link active':'nav-item nav-link'" ng-click="currentUser.page=2">述职报告</a>
            </nav>

            <br/>

            <div ng-show="currentUser.page===0">

                <div class="row">
                    <div class="col-6">
                        <img ng-src="{{currentUser.pic}}"   class="img-fluid" alt="图片">
                    </div>

                    <div class="col-6">
                        {{currentUser.textSimple}}
                    </div>
                </div>
            </div>
            <div  ng-show="currentUser.page===1">
            {{currentUser.money}}
            </div>

            <div  ng-show="currentUser.page===2">
                {{currentUser.report}}
            </div>
        </div>
      </div>
    </div>
</div>

</body>


<script src="/ref/bootstrap.min.js"></script>
<script src="/ref/jquery.min.js"></script>
<script src="/ref/angular.min.js"></script>
<script src="/app.js"></script>